<template>
 <lay-layout class="Pop">
    
    <lay-body>
      <lay-table 
          
            :columns="columns"
            :dataSource="dataSource"
            :default-toolbar="defaultToolbar"
            v-model:selectedKeys="selectedKeys"
            even
            @row="rowClick"
         
           
          >
        </lay-table>

    </lay-body>
    <lay-footer>
      
     <lay-switch v-model="IsDetail" onswitch-text="详细信息"  unswitch-text="读写"></lay-switch>

      <lay-textarea placeholder=""  
      v-model="result"
      :disabled="true"
      style="height: 99%;"
      ></lay-textarea>
 
    </lay-footer>
  </lay-layout>

</template>

<script lang="ts">
import { ref, watch,reactive,onMounted } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from "../../library/MyData"; 
import MyString from "../../library/MyString"; 
export default {
  props:{
      data: Array 
  },

  setup(prop:any, context:any) {
    const selectedKeys = ref<Array<string>>([]) 
    const selectedObjs=ref<Array<any>>([]);
    const defaultToolbar = ref(false)
    // const page = ref(  new MyPage()  ); 
    const columns = [
      {
        title: '复选',
        width: '50px',
        type: 'checkbox',
        fixed: 'left'
      },
      
      {
        title: '字段名',
        width: '100px' ,
        key: 'ename'
      },
      {
        title: '名称',
        width: '100px', 
        key: 'name' 
      },
      {
        title: '类型',
        width: '100px',
        key: 'lx' 
      } ,
      {
        title: '备注',
        width: '200px',
        key: 'memo' 
      } 
    ]

    
    prop.data.forEach((element: { id: any; ename: any; }) => {
      element.id=element.ename;
    });
    const dataSource = ref(prop.data);
   
    const rowClick = function (data: any) {}

    const rowDoubleClick = function (data: any) {}

    const result=ref<string>("");
    const createCol=()=>{
        let s='';
        selectedObjs.value.forEach(element=>{ 
          let fieldName=MyString.toLowerCaseCamelCase(element.ename);
          if(IsDetail.value){
            

s+=`
<lay-form-item label="${element.name}" prop="${fieldName}" >
`;
s+=`<lay-input v-model="model.${fieldName}" disabled></lay-input>
`;
s+=`</lay-form-item>
`;

          }
          else{
            
            let required=element.required?"required":"";
           
s+=`
<lay-form-item label="${element.name}" prop="${fieldName}" ${required}>
`;

if(element.lx=="Int32"
  ||element.lx=="int"
  ||element.lx=="int32"
  ||element.lx=="java.lang.Integer"
  ||element.lx=="java.lang.Long"
  

){
  s+=`<lay-input-number v-model="model.${fieldName}" :step="1" position="right"></lay-input-number>
`;
}else if(element.lx=="java.util.Date"||element.lx=="time.datetime"||element.lx=="datetime.MyTime"){
  s+=`<lay-date-picker v-model="model.${fieldName}" simple type="date" :format="'YYYY-MM-DD' placeholder="${element.name}""></lay-date-picker>  
  `;  
}else if(element.lx=="Boolean"||element.lx=="bool"){
  s+=`<lay-switch v-model="model.${fieldName}" ></lay-switch> 
  `;  
}
 
else{
  s+=`<lay-input v-model="model.${fieldName}" placeholder="${element.memo}"></lay-input>
`;
}


s+=`</lay-form-item>
`;

          }
             
        })
        result.value=s; 
    }
    watch(
      selectedKeys,(newVal:Array<string>,oldVal:Array<string>)=>{
         
        let addVal=MyData.keyAdd(oldVal,newVal)  ;
        let removeVal=MyData.keyRemove(oldVal,newVal)  ;
         
        removeVal.forEach(element=>{
            MyData.removeDataById(selectedObjs.value,element);          
        })

        addVal.forEach(element=>{
            let m=MyData.getById(selectedObjs.value,element);
            if(!m){
              m=MyData.getById(dataSource.value,element);
              selectedObjs.value.push(m)
            }             
        })
        createCol();
      }
    )
   const IsDetail=ref<boolean>(false);

    onMounted(() =>{  
     
    });
    return {
      columns,
      dataSource,
      selectedKeys, 
      defaultToolbar,
      //page,
      rowClick,
      rowDoubleClick,
      
      selectedObjs,
      createCol,
      result,
       
      IsDetail
    }
  }
}
</script>
<style scoped>
.Pop .layui-footer,
.Pop .layui-header {
  height: 200px;
  text-align: center; 
   
}  
</style>